<template>
  <div class="update">
    <div class="left">
      <!-- <div class="checkAll">
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">当前页</el-checkbox>
      </div> -->
    </div>
    <div class="right">
      <el-button :disabled="selectData.length == 0" class="btn" @click="batchProcessing(1)">批量上架</el-button>
      <el-button :disabled="selectData.length == 0" class="btn" @click="batchProcessing(2)">批量下架</el-button>
      <el-button class="btn" @click="batchProduct">导入产品</el-button>
      <el-button class="btn last" @click="newProduct">新建产品</el-button>
    </div>
    <!-- 删除弹框 -->
    <ZWDeletdialog ref="DeletdialogRef" @submit="onSubmit" />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, withDefaults, defineProps, onBeforeUnmount } from 'vue'
  import ZWDeletdialog from '@/components/ZWDeletdialog.vue'
  import router from '@/router'
  import bus from '@/utils/bus'
  const emit = defineEmits(['batchProcessing', 'batchShelves', 'batchProduct', 'newProduct'])
  const checkAll = ref([])
  const DeletdialogRef: any = ref(null)
  const props = defineProps(['selectData'])
  const onSubmit = () => {}
  // 批量上架
  const batchProcessing = (num: any) => {
    emit('batchProcessing', num)
  }
  //导入产品
  const batchProduct = () => {
    emit('batchProduct')
  }
  //新建产品
  const newProduct = () => {
    emit('newProduct')
  }
</script>

<style scoped lang="scss">
  .update {
    width: 100%;
    padding: 10px 0 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

    .left {
      display: flex;
      align-items: center;

      .checkAll {
        padding: 0px 12px;
        background: #f9f9f9;
        border-radius: 1px;
        border: 1px solid #eaeaea;
      }

      .updateTime {
        font-size: 14px;
        font-weight: 300;
        color: #33302d;
        line-height: 14px;
        margin-left: 28px;
      }
    }

    .right {
      display: flex;

      // .btn {
      //   padding: 11px 12px;
      //   background: #ffffff;
      //   border-radius: 4px;
      //   border: 1px solid #ff6b00;
      //   color: #ff6b00;
      //   cursor: pointer;
      //   margin-left: 14px;
      // }
      .last {
        color: #fff;
        border: 1px solid #ff6b00;
        background: #ff6b00;
      }
    }
  }
</style>
